


<template>
  <div class="container">

    编号：{{ num }} <span> </span>
    <button @click="updateNum">修改编号</button>
    <br />
    姓名：{{ person.name }} <span> </span>
    <button @click="updateName">修改姓名：</button>
    <br />
    年龄：{{ person.age }} <span> </span>
    <button @click="updateAge">修改年龄</button>
    <br />
    <button @click="update">修改人物</button>
    <hr>
    座驾{{ readCar.name }} 牌，{{ readCar.model.title }}
    <hr>
    {{ shallReadCar }}
    <button @click="getTitle">shallowReadonly获取车型</button>
    <br>
    <button @click="updateCarModel">修改车型</button>
    <button @click="updateCar">置换新车</button>
  </div>

</template>


<script lang="ts" setup name="App">
import type { title } from 'process';
import { reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef } from 'vue';

let num = ref(1);
//shall修饰无法修改子对象属性
// let person = ref({
//   name:'张三',age:20
// })
let person = shallowRef({
  name: '张三', age: 20
})
let car = reactive({
  name:'porsche',
  model:{
    title:'n2',
    model:{
      title:'n3'
    }
  }
})
//shall修饰无法修改子对象属性
// let car = shallowReactive({
//   name:'porsche',
//   model:{
//     title:911
//   }
// })

//避免修改数据
let readCar = readonly(car)
let shallReadCar=shallowReadonly(car)


function updateNum() {
  num.value += 1;
}
function updateName() {
  person.value.name = 'toy'
}
function updateAge() {
  person.value.age += 1;
}

function update() {
  person.value = {
    name: 'toy', age: 30
  }
}
//只读数据无法修改
function updateCar() {
  Object.assign(readCar,{name:'bwm',model:{title:'X6'}})
}

//只读数据无法修改
function updateCarModel(){
  readCar.model.title=715
}

function getTitle() {
  shallReadCar.name = 'bwm'
  shallReadCar.model.title = '985'
  console.log(shallReadCar.model.model.title);
  
}

</script>



<style scoped>

</style>
